<template>
    <div>
        <h3>商品详情页面</h3>
        <h3>时间过滤器: {{1608722876000 | date}}</h3>
        <h3>补0过滤器使用：{{4 | fillzero}}</h3>
        <!-- 约定式路由 -->
        <nuxt-link :to='{name:"goods-comment-cid",params:{a:"3"},query:{"name": "001"}}'>评价001</nuxt-link>    
        <!-- 展示区 -->
        <nuxt/>
    </div>    
</template>
<script>
export default {
    name: "godos-detail",
    // 根据id获取详情数据
    asyncData({$axios,params,query}){
        let courseId = params.id
        // 关于Promiss.all: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
        return Promise.all([
            $axios({url: `/eduservice/course/${params.id}`}), // 根据课程id获取详情
            $axios({ url: `/eduservice/comment/1/10`,method: 'get',params: {courseId}}), // 根据课程id获取评价信息
        ]).then(([courseDetail,comment])=> ({course: courseDetail.data.data,comment: comment.data.data}))
    },
    // 添加校验，validate函数接收上一个页面传递过来的参数，根据参数进行判断
    validate({params,query}){
        return typeof params.id ==='string'
    },
    // 注入meta信息到页面增强seo优化
    head(){
        return this.$seo(this.course.course.title,this.course.course.description,[{}])
    },

    transition: 'test' // 定义动画的名字
}
</script>
<style scoped>
/* 进入或退出的效果 */
.test-enter-active,.test-leave-active{
    transition: .5s ease all;
}
/* 进入本身样式 */
.test-enter-active,.test-leave-active{
    margin-left: -1000px;
}

</style>